<template>
   <div class="wrap">
      <div class="top">
         <img src="../../../static/img/login111.png" alt="">
      </div>
      <div class="inp">
         <div class="uname">
            <img src="../../../static/img/login112.png" alt="">
            <input type="text" placeholder="手机号/账号" v-model="uname">
         </div>
         <!--     密码登录   -->
         <div class="pword" v-show="!isTel">
            <img src="../../../static/img/login113.png" alt="">
            <input :type="isLook?'text':'password'" placeholder="密码" v-model="pword">
            <p>
               <img v-show="pword.length>=1" :src="isLook?'../../../static/img/look1.png':'../../../static/img/look2.png'" alt="" class="lookPword" @click="isLook=!isLook">
            </p>
         </div>
         <!--     验证码登录   -->
         <div class="yzmLogin" v-show="isTel">
            <img src="../../../static/img/login113.png" alt="">
            <input type="text" placeholder="验证码" v-model="code">
            <p class="hqyzm" @click="obtain">{{time}}</p>
         </div>
         <div class="isWrap">
            <p class="phone_login" @click="isTel=!isTel">{{isTel?'密码登录':"手机验证码登录"}}</p>
         </div>
         <div class="btn" @click="login">立即登录</div>
         <div class="msg" @click="jump('register')">还没有账号？立即注册</div>
      </div>
      <div class="footer"><img src="../../../static/img/login114.png" alt=""></div>
   </div>
</template>

<script>
    import qs from 'qs';

    export default {
        name: "login",
        data() {
            return {
                isLook: false, // 密码是否明文
                uname: '',
                pword: '',
                isTel: false, // 是否手机验证码登录
                time: '获取验证码', //验证码倒计时
                show: false,
                code: '', // 验证码
                token: ''
            }
        },
        mounted() {
            window.addEventListener('beforeunload', e => {
                var event = e || window.e;
                event.preventDefault ? e.preventDefault() : e.returnValue = false;
                localStorage.setItem('VerificationCodeTime', this.time)
            })
        },
        methods: {
            jump(page) {
                this.$router.push({
                    name: page
                })
            },
            obtain() {
                // this.$myNotice('测试获取验证码', 1000);
                if (typeof (this.time) == "number") {
                    this.$myNotice('异常错误', 1000);
                    return;
                } else if (!/^1[3-9][0-9]{9}$/.test(this.uname)) {
                    this.$myNotice('手机号码有误', 1000);
                    return;
                }

                var time = localStorage.getItem('VerificationCodeTime');
                time = time.length >= 2 ? time : time * 1;
                if (time && typeof (time) == 'number') {
                    this.time = time;
                } else {
                    this.time = 60;
                }
                // this.$myNotice('要获取验证码了',1500);
                // 获取验证码
                this.$myAxios('index/Sms/send', 'post', {
                    tel: this.uname,
                    name: '登录验证'
                }).then(res => {
                    this.token = res.data.token;
                    console.log(res.data)
                });
                var timer = setInterval(() => {
                    this.time -= 1;
                    if (this.time <= 0) {
                        clearInterval(timer);
                        this.time = '重新获取';
                        localStorage.setItem('VerificationCodeTime', '获取验证码')
                    }
                }, 1000)
            },
            login() {
                if (this.isTel) {
                    // 短信验证码登录
                    this.$myAxios('index/Sms/verify', 'post', {
                        code: this.code,
                        token: this.token,
                        mobile: this.uname,
                        name: '登录验证'
                    }).then(res => {
                        switch (res.data.state) {
                            case 1:
                                // 登录成功
                                this.$myNotice('登录成功!', 1000);
                                this.$myAxios('api/user/usemobilelogin.html', 'post', {
                                    user_id: res.data.user_id
                                }).then(data => {
                                    if (data.data.code == '1') {
                                        this.$myAxios('index/user/head','post',{
                                            user_id:res.data.user_id
                                        }).then(res=>{
                                             if (res.data.state == '1') {
                                                 var obj = {
                                                     "user": res.data.user.id,
                                                     "carArr": []
                                                 };
                                                 this.$myStorage.setItem('localStorage','userCar', JSON.stringify(obj));
                                                 this.$myStorage.login(res.data.user.id);
                                                 if (res.data.user.avatar.length < 5) {
                                                     res.data.user.avatar = '../../../static/img/ren.png'
                                                 }
                                                 var msg = res.data;
                                                 var user = res.data.user;
                                                 user.collect_goods = msg.collect_goods;
                                                 user.collect_manystore = msg.collect_manystore;
                                                 user.browse = msg.browse;
                                                 user.token_lt = data.data.data.userinfo.token;
                                                 this.$store.state.userInfo = res.data.user;
                                                 this.$router.push({
                                                   name:'Client/index'
                                                 });
                                             }else {
                                                 this.$myNotice('登录失败！',1500)
                                             }
                                        })
                                    }else {
                                        this.$myNotice('登录失败！',1500)
                                    }
                                });
                                break;
                            case 10001:
                                // 验证码
                                this.$myNotice('验证码不对喔~', 1500);
                                break;
                            case 10002:
                                // 验证码
                                this.$myNotice('请先注册喔~', 1500);
                                break;
                            case 10000:
                                // 验证码
                                this.$myNotice('验证码已失效~', 1500);
                                break;
                        }
                    });
                } else {
                    // 手机号密码登录
                    this.$myAxios('index/login/login', 'post', {
                        mobile: this.uname,
                        password: this.pword
                    }).then(res => {
                        if (res.data.state == 1) {
                            this.$myAxios('api/user/usemobilelogin.html','post',{
                                user_id:res.data.user_id
                            }).then(data=>{
                                if (data.data.code == '1') {
                                    this.$myNotice('登录成功!', 1000);
                                    this.$myAxios('index/user/head', 'post', {
                                        user_id: res.data.user_id
                                    }).then(res => {
                                        var obj = {
                                            "user": res.data.user.id,
                                            "carArr": []
                                        };
                                        this.$myStorage.setItem('localStorage','userCar', JSON.stringify(obj));
                                        this.$myStorage.login(res.data.user.id);
                                        if (res.data.user.avatar.length < 5) {
                                            res.data.user.avatar = '../../../static/img/ren.png'
                                        }
                                        var msg = res.data;
                                        var user = res.data.user;
                                        user.collect_goods = msg.collect_goods;
                                        user.collect_manystore = msg.collect_manystore;
                                        user.browse = msg.browse;
                                        user.token_lt = data.data.data.userinfo.token;
                                        this.$store.state.userInfo = res.data.user;
                                        this.$router.push({
                                          name:'Client/index'
                                        });
                                    });
                                }else {
                                    this.$myNotice('登录失败！',1500)
                                }
                            });

                        } else if (res.data.state == 2) {
                            this.$myNotice('密码错误!', 1000);

                        } else {
                            this.$myNotice('该账号未注册!', 1000);
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>
   .wrap {
      padding-top: .4rem;
   }

   .top {
      width: 100%;
      height: 3rem;
   }

   .top > img {
      width: 100%;
      max-height: 3rem;
   }

   .uname, .pword, .yzmLogin {
      width: 85%;
      height: .2rem;
      /*box-sizing: border-box;*/
      border-bottom: .01rem solid #E5E5E5;
      margin: .15rem auto;
      padding: .1rem 0;
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .yzmLogin {
      padding-bottom: .15rem;
   }

   .uname {
      margin-top: 0;
   }

   .pword {
      margin-bottom: .2rem;
      position: relative;
   }

   .pword > p {
      width: .2rem;
      height: .2rem;
      position: absolute;
      right: 0;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: flex-end;
   }

   .uname > img, .pword > img:nth-child(1), .yzmLogin > img {
      width: .14rem;
      height: .17rem;
      margin-right: .12rem;
   }

   .uname > input, .pword > input, .yzmLogin > input {
      width: 2.1rem;
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      outline: none;
      border: none;
   }

   .phone_login {
      width: 1.2rem;
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      text-align: right;
   }

   .hqyzm {
      width: 1.05rem;
      height: .4rem;
      background: rgba(247, 177, 23, 1);
      /*border:.01rem solid rgba(232,155,1,1);*/
      border-radius: .2rem;
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      text-align: center;
      line-height: .4rem;
      color: #FFFFFF;
   }

   .btn {
      width: 3.15rem;
      height: .45rem;
      background: linear-gradient(0deg, rgba(253, 192, 58, 1) 0%, rgba(252, 173, 14, 1) 100%);
      border-radius: .23rem;
      margin: .2rem auto;
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
      line-height: .45rem;
   }

   .msg {
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 500;
      text-decoration: underline;
      color: rgba(102, 102, 102, 1);
      text-align: center;
   }

   .isWrap {
      width: 85%;
      margin: 0 auto;
      display: flex;
      flex-flow: row;
      justify-content: flex-end;
   }

   .footer {
      width: 100%;
      margin: .3rem auto 0;
      text-align: center;
   }

   .footer > img {
      width: .76rem;
      height: .28rem;
   }

   .lookPword {
      width: .14rem;
   }


</style>
